import * as React from 'react';
import {Input, message, Form, Button, Icon} from 'antd';
import appStore from '../../store/appStore';
import {FormLocalProps} from '../../interface/component';
import './index.less';
import {VALICHA_INFO} from '../../config'

const FormItem = Form.Item;

class LoginPage extends React.Component<FormLocalProps, any> {
    // 存放人机验证的载体
    public valiMachine: any;

    // 人机验证实例后的资源对象
    public vaptchaObj: any;

    public componentDidMount() {
        if (this.valiMachine) {
            window['vaptcha']({
                vid: VALICHA_INFO.VID,
                style: 'light',
                type: 'click',
                scene: '01',
                color: '#0e8d95',
                container: this.valiMachine
            }).then((vaptchaObj: any) => {
                this.vaptchaObj = vaptchaObj;
                vaptchaObj.render();
            })
        }
    }

    public handleSubmit = (e: any) => {
        e.preventDefault();

        const {form, history} = this.props;
        form.validateFields(async (err: any, values: any) => {

            if (!err) {
                values['token'] = this.vaptchaObj.getToken();
                if (!values['token']) {
                    return message.info('请进行人机验证');
                }

                const isError: any = await appStore.onLogin(values);

                if (isError) {
                    this.vaptchaObj.reset();

                    return message.error(isError);
                }

                history.replace('/');
            }
        });
    };

    public render() {
        const {getFieldDecorator} = this.props.form;

        return (
            <div className="main">
                <div>
                    <div className="top">
                        <div className="header">
                            <img alt="logo"
                                 className="logo"
                                 src="https://zos.alipayobjects.com/rmsportal/HXZvKsbcQljpFToWbjPj.svg"/>
                            <span className="title">追风</span>
                        </div>
                        <div className="desc">追风系统管理</div>
                    </div>
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem>
                            {getFieldDecorator('username', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please enter username!',
                                    },
                                ],
                            })(
                                <Input size="large"
                                       prefix={<Icon type="user" className="prefixIcon"/>}
                                       placeholder="username"/>
                            )}

                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('password', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please enter password!',
                                    },
                                ],
                            })(
                                <Input size="large"
                                       type="password"
                                       prefix={<Icon type="lock" className="prefixIcon"/>}
                                       placeholder="password"/>
                            )}
                        </FormItem>
                        <FormItem>
                            <div className="vali-machine" ref={(self: any) => this.valiMachine = self}/>
                        </FormItem>
                        <Button className="submit"
                                htmlType="submit"
                                size="large"
                                type="primary"
                                loading={appStore.loginLoading}>登录</Button>
                    </Form>
                </div>
            </div>
        );
    }
}

export default Form.create<any>()(LoginPage);
